<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI海龟汤 - 登录</title>
  <!-- 引入Vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind：适配明亮轻科技风 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            // 保留primary但调整为明亮科技蓝，新增辅助色
            primary: '#3b82f6',
            secondary: '#818cf8',
            accent: '#22d3ee'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类+动画：整合轻科技风核心效果 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      /* 基础动画工具类 */
      .wave-animation {
        animation: wave 8s ease-in-out infinite alternate;
      }
      .float-animation {
        animation: float 6s ease-in-out infinite;
      }
      .rotate-animation {
        animation: rotate-animation 25s linear infinite;
      }
      .pulse-animation {
        animation: pulse-animation 3s ease-in-out infinite;
      }
      .animate-shake {
        animation: shake 0.5s ease-in-out;
      }
      /* 交互效果 */
      .bounce-light {
        transition: transform 0.3s ease;
      }
      .bounce-light:hover {
        transform: translateY(-3px);
      }
    }
    
    /* 动画关键帧定义 */
    @keyframes wave {
      0% { transform: translateX(0) translateY(0); }
      100% { transform: translateX(-10px) translateY(5px); }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes rotate-animation {
      0% { transform: rotate(0deg) scale(1); }
      100% { transform: rotate(360deg) scale(1.05); }
    }
    
    @keyframes pulse-animation {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 0.4; }
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    /* 基础样式重置 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<!-- 明亮渐变背景 + 背景装饰容器 -->
<body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen p-4 relative">
  <!-- 1. 轻科技风背景装饰（绝对定位覆盖全屏） -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <!-- 旋转几何边框 -->
    <div class="absolute top-1/4 left-1/5 w-40 h-40 border-2 border-blue-200 rounded-full opacity-30 rotate-animation"></div>
    <div class="absolute bottom-1/3 right-1/4 w-60 h-60 border border-purple-200 rounded-full opacity-20 rotate-animation animation-delay-1000"></div>
    <div class="absolute top-1/2 right-1/5 w-20 h-20 border-2 border-cyan-200 rounded-lg opacity-40 float-animation"></div>
    
    <!-- 点阵信号装饰 -->
    <div class="absolute top-20 right-20 opacity-40 pulse-animation">
      <div class="flex gap-1">
        <div class="w-2 h-2 rounded-full bg-blue-400"></div>
        <div class="w-2 h-2 rounded-full bg-blue-400 opacity-50"></div>
        <div class="w-2 h-2 rounded-full bg-blue-400"></div>
      </div>
      <div class="flex gap-1 mt-1">
        <div class="w-2 h-2 rounded-full bg-blue-400 opacity-50"></div>
        <div class="w-2 h-2 rounded-full bg-blue-400"></div>
        <div class="w-2 h-2 rounded-full bg-blue-400 opacity-50"></div>
      </div>
    </div>
    
    <!-- 简约科技图标 -->
    <div class="absolute bottom-20 left-20 opacity-30 float-animation animation-delay-1500">
      <i class="fa fa-wifi text-3xl text-cyan-500"></i>
    </div>
    <div class="absolute top-1/3 right-1/3 opacity-25 pulse-animation animation-delay-500">
      <i class="fa fa-code text-2xl text-purple-500"></i>
    </div>
    
    <!-- 渐变光带 -->
    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-300 to-purple-300 opacity-50"></div>
    <div class="absolute bottom-0 right-0 w-1 h-full bg-gradient-to-b from-cyan-300 to-blue-300 opacity-50"></div>
  </div>


  <!-- 2. Vue挂载容器（层级高于背景装饰） -->
  <div id="app" class="w-full z-10"></div>
  
  <!-- 引入应用脚本 -->
  <script src="./app.js"></script>

  <!-- 补充动画延迟类（避免样式冲突） -->
  <style>
    .animation-delay-500 { animation-delay: 0.5s; }
    .animation-delay-1000 { animation-delay: 1s; }
    .animation-delay-1500 { animation-delay: 1.5s; }
    /* 输入框图标定位优化 */
    input { padding-left: 2.75rem; }
  </style>
</body>
</html>